<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>小牛牛的博客</title>
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/blog_main.css" />
		<script src="../js/blog_main.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/miniSPA/spaUtil.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<header id="main_header">
			<h1>小牛牛的博客</h1>
		</header>
		<nav id="main_menu">
			<ul id="menu_ul" style="overflow: hidden;">
				<li class="menu_level1_li"><a href="">主页</li>
				<li class="menu_level1_li"><a href="#documentType">文章分类</a></li>
				<li class="menu_level1_li"><a href="">写文章</a></li>
				<li class="menu_level1_li"><a href="">权限管理</a></li>
				<li class="menu_level1_li"><a href="">退出</a></li>
			</ul>
		</nav>
		<article>
			<nav id="main_nav">
				<p id="article_type">
					<h2>博客文章分类</h2>
					<ul class="level1_ul">
						<li class="level1_li">Java</li>
						<ul class="level2_ul" hidden>
							<li class="level2_li"><a href="">JavaCore</a></li>
							<li class="level2_li"><a href="">JavaWeb</a></li>
						</ul>
						<li class="level1_li">前端</li>
						<ul class="level2_ul" hidden>
							<li class="level2_li"><a href="">HTML5</a>
							<li class="level2_li"><a href="">CSS</a>
						</ul>
						<li class="level1_li">框架</li>
						<ul class="level2_ul" hidden>
							<li class="level2_li"><a href="">spring</a>
							<li class="level2_li"><a href="">hibernate</a>
							<li class="level2_li"><a href="">struts2</a>
						</ul>
						<li class="level1_li">日常记录</li>
						<ul class="level2_ul" hidden>
							<li class="level2_li"><a href="">技术笔记</a>
							<li class="level2_li"><a href="">点滴记录</a>
						</ul>
						<li class="level1_li">心灵感悟</li>
						<ul class="level2_ul" hidden>
							<li class="level2_li"><a href="">毒鸡汤</a>
							<li class="level2_li"><a href="">偶有所感</a>
						</ul>
					</ul>
				</p>
				<p>
					<h2>点击排行</h2>
					<ol>
						<li><a href="">ES6新特性介绍</a></li>
						<li><a href="">Java多线程编程注意事项</a></li>
						<li><a href="">心灵毒鸡汤</a></li>
						<li><a href="">html5的那些事</a></li>
					</ol>
				</p>
				<p>
					<h2>猜你喜欢</h2>
					<ol>
						<li><a href="">ES6新特性介绍</a></li>
						<li><a href="">Java多线程编程注意事项</a></li>
						<li><a href="">心灵毒鸡汤</a></li>
						<li><a href="">html5的那些事</a></li>
					</ol>
				</p>
				<p>
					<h2>关注的博主</h2>
					<ol>
						<li><a href="">ES6新特性介绍</a></li>
						<li><a href="">Java多线程编程注意事项</a></li>
						<li><a href="">心灵毒鸡汤</a></li>
						<li><a href="">html5的那些事</a></li>
					</ol>
				</p>
				<p>
					<h2>猜你喜欢</h2>
					<ol>
						<li><a href="">ES6新特性介绍</a></li>
						<li><a href="">Java多线程编程注意事项</a></li>
						<li><a href="">心灵毒鸡汤</a></li>
						<li><a href="">html5的那些事</a></li>
					</ol>
				</p>
				<p>
					<h2>关注的博主</h2>
					<ol>
						<li><a href="">ES6新特性介绍</a></li>
						<li><a href="">Java多线程编程注意事项</a></li>
						<li><a href="">心灵毒鸡汤</a></li>
						<li><a href="">html5的那些事</a></li>
					</ol>
				</p>
			</nav>
			<section id="main_content">
				<nav id="document_content">
					<table style="width:100%">
						<thead>
							<tr>
								<th class="nav_title" style="width:100%;text-align: left"><strong>博主的文章</strong></th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td style="width:100%">
									<a href="">
									<dl>
										<dt>
											<div class="document_title">Spring Boot的基本配置详解<span class="document_title_date">更新时间：2017-09-07</span></div>
											<div class="docuemnt_type">框架->Spring</div>
										</dt>
										<dd>Spring Boot是最近兴起的基于微架构的Web快速开发最佳实践应用，是在Spring基础增加的Spring生态系统的一部分...</dd>
									</dl>
									</a>
									<div style="float:left" class="document_praise document_add_praise">
										<span class="document_praise_text">(3个赞)</span>
									</div>
									<div style="float:right">文章点击次数(30021次)</div>
								</td>
							</tr>
							<tr>
								<td style="width:100%">
									<dl>
										<dt>
											<div class="document_title">ES6新特性不完全讲解<span class="document_title_date">更新时间：2017-09-07</span></div>
											<div class="docuemnt_type">前端->JavaScript</div>
										</dt>
										<dd>ES6，全称为ECMAScript6，是JavaScript语法的最新标准，本文对ES6做了一个不完全的讲解。</dd>
									</dl>
									<div style="float:left" class="document_praise document_add_praise">
										<span class="document_praise_text">(3个赞)</span>
									</div>
									<div style="float:right">文章点击次数(30021次)</div>
								</td>
							</tr>
							<tr>
								<td style="width:100%">
									<dl>
										<dt>
											<div class="document_title">java集合读书笔记<span class="document_title_date">更新时间：2017-09-07</span></div>
											<div class="docuemnt_type">java->JavaCode</div>
										</dt>
										<dd>这是我阅读Java核心技术第一卷，集合部分的读书笔记。详细记录了不同集合的用法和特点。尤其是HashMap的独特的内存结构，这是原来的学习所没有接触过的。这让我知道了读经典著作的好处。大家也可以来看看一下...</dd>
									</dl>
									<div style="float:left" class="document_praise document_add_praise">
										<span class="document_praise_text">(3个赞)</span>
									</div>
									<div style="float:right">文章点击次数(30021次)</div>
								</td>
							</tr>
							<tr>
								<td style="width:100%">
									<dl>
										<dt>
											<div class="document_title">Servlet3.1新特性笔记<span class="document_title_date">更新时间：2017-09-07</span></div>
											<div class="docuemnt_type">Java->Java Web</div>
										</dt>
										<dd>随着Servlet3.1版本的推出，一些Servlet3.0中没有功能也已经出现，本文是笔者的学习笔记。</dd>
									</dl>
									<div style="float:left" class="document_praise document_add_praise">
										<span class="document_praise_text">(3个赞)</span>
									</div>
									<div style="float:right">文章点击次数(30021次)</div>
								</td>
							</tr>
							<tr>
								<td style="width:100%">
									<dl>
										<dt>
											<div class="document_title">java集合读书笔记<span class="document_title_date">更新时间：2017-09-07</span></div>
											<div class="docuemnt_type">java->JavaCode</div>
										</dt>
										<dd>这是我阅读Java核心技术第一卷，集合部分的读书笔记。详细记录了不同集合的用法和特点。尤其是HashMap的独特的内存结构，这是原来的学习所没有接触过的。这让我知道了读经典著作的好处。大家也可以来看看一下...</dd>
									</dl>
									<div style="float:left" class="document_praise document_add_praise">
										<span class="document_praise_text">(3个赞)</span>
									</div>
									<div style="float:right">文章点击次数(30021次)</div>
								</td>
							</tr>
						</tbody>
					</table>
				</nav>	
				<nav id="gift">
					<table style="width:100%;">
						<thead>
							<tr>
								<th colspan="5" class="nav_title" style="width:100%;text-align: left"><strong>博主收到的礼物</strong></th>
							</tr>
						</thead>
						<tbody>
							<tr style="height: 100px">
								<td class="gift_td">
									<a href="#">
										<img src="../img/ooopic_1506740349.png" style="width:100px;height: 100px;"/>
										<div style="float: right;">1件</div>
									</a>
								</td>
								<td class="gift_td">
									<a href="#">
										<img src="../img/ooopic_1506740284.png" style="width:100px;height: 100px;"/>
										<div style="float: right;">3件</div>
									</a>
								</td>
								<td class="gift_td">
									<a href="#">
										<img src="../img/ooopic_1506740300.png" style="width:100px;height: 100px;"/>
										<div style="float: right;">5件</div>
									</a>
								</td>
								<td  class="gift_td">
									<a href="#">
										<img src="../img/ooopic_1506740326.png" style="width:100px;height: 100px;"/>
										<div style="float: right;">2件</div>
									</a>
								</td>
								<td  class="gift_td">
									<a href="#">
										<img src="../img/ooopic_1506740326.png" style="width:100px;height: 100px;"/>
										<div style="float: right;">2件</div>
									</a>
								</td>
							</tr>
						</tbody>
					</table>				
				</nav>
			</section>
			<aside id="main_aside">
				<p id="aside_login">
					<h2>用户登录</h2>
					<fieldset id="userLogin">
						<legend hidden>用户登录</legend>
						<label for="userName">用户名：</label>
						<input type="text" name="userName" id="userName" placeholder="请输入用户名"/>
						<label for="password">密&nbsp;码：</label>
						<input type="password" name="password" id="password" placeholder="请输入密码"/>
						<button type="button" id="btn_login" style="margin-left:133px">登录</button>
					</fieldset>					
				</p>
				<p id="aside_login_success">
					<h2>欢迎回家</h2>
					<div id="userPhoto"></div>
					<div id="userOperation">
						<h3 style="display: inline;">著名博主：&nbsp;</h3>albert
						<span class="userBtn" style="float: left;margin-left:8px">改换照片</span>
						<span class="userBtn" style="float: right;margin-right:8px">消息通知</span>
					</div>
				</p>
				<p>
					<ol>
						<li><a href="">ES6新特性介绍</a></li>
						<li><a href="">Java多线程编程注意事项</a></li>
						<li><a href="">心灵毒鸡汤</a></li>
						<li><a href="">html5的那些事</a></li>
					</ol>
				</p>
			</aside>
		</article>
		<footer id="main_footer" style="text-align: center;">
			author:<address style="display: inline;"><a href="mailto:54397946@qq.com">yuhf</a></address>
		</footer>
	</body>

</html>